import { Button, Form, Input, message, Modal, Select } from "antd";
import * as React from "react";
import { connect } from "react-redux";
import { ResBodyCode } from "../../../../../common/config/http";
import {
  formItemLayout,
  formSubmit
} from "../../../../../common/config/repeat";
import {
  IForm,
  mapDispatchToProps,
  mapStateToProps,
  TProps
} from "./interface";
const { Item } = Form;
const { Option } = Select;
const { confirm } = Modal;

const View: React.FC<TProps> = props => {
  const { form, formInfo, hide, submit, filter, getTableDatasource } = props;

  const { getFieldDecorator } = form;

  function handleSubmit(e: React.FormEvent) {
    formSubmit(e, form, (values: IForm) => {
      const data = values;
      // 发送请求
      submit(data, res => {
        console.log("res", res);
        if (res.code === ResBodyCode.OK) {
          message.success(res.msg);
          // 显示成功的提示
          showConfirm();
          // 刷新列表
          getTableDatasource(filter);
        } else {
          message.error(res.msg);
        }
      });
    });
  }

  function showConfirm() {
    confirm({
      title: "订单添加成功",
      content: "是否需要继续添加订单？",
      onOk() {},
      onCancel() {
        hide(formInfo);
      }
    });
  }

  const formBody = (
    <Form {...formItemLayout} onSubmit={handleSubmit}>
      <Item label="名称">{getFieldDecorator("name",{rules:[{required:true,message:"必填项"}]})(<Input />)}</Item>
    </Form>
  );

  return (
    <Modal
      title="添加地区"
      destroyOnClose
      // 
      onCancel={() => hide(formInfo)}
      okText="提交"
      onOk={e => {
        handleSubmit(e);
      }}
      visible={formInfo.visible_add}
    >
      <div style={{ marginTop: "10px" }}>{formBody}</div>
    </Modal>
  );
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Form.create({ name: "添加地区" })(View));
